<template>
  <el-dialog v-model="dialogShow" :title="dialogTitle" width="800px" :append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules" label-width="120px"  style="width: 500px">
      <el-form-item label="订单编号">
        {{data.row.orderCode}}
<!--        <el-input v-model.trim="dialogForm.sid" disabled placeholder="请输入订单编号"/>-->
      </el-form-item>

      <el-form-item label="取消原因" prop="dictCancelSid" v-if="dialogForm.status == 3">
        <el-select v-model="dialogForm.dictCancelSid" placeholder="请选择取消原因" clearable  style="width: 300px">
          <el-option :label="item.memberName" :value="item.sid" v-for="(item, index) in list" :key="index"/>
        </el-select>
      </el-form-item>

      <el-form-item label="取消原因" prop="content" v-if="dialogForm.status == 3">
        <el-input v-model.trim="dialogForm.content" clearable placeholder="请输入取消原因"></el-input>
      </el-form-item>
      <el-form-item label="快递公司" prop="courierCompany" v-if="dialogForm.status == 1">
        <el-input v-model.trim="dialogForm.courierCompany" clearable placeholder="请输入快递公司"></el-input>
      </el-form-item>
      <el-form-item label="快递单号" prop="courierNumber" v-if="dialogForm.status == 1">
        <el-input v-model.trim="dialogForm.courierNumber" clearable placeholder="请输入快递单号"></el-input>
      </el-form-item>
<!--      <el-form-item label="取消原因" prop="content">-->
<!--        <el-input v-model.trim="dialogForm.content" clearable placeholder="请输入取消原因"></el-input>-->
<!--      </el-form-item>-->
<!--      dictCancelSid-->

      <el-form-item>
        <div class="flexs">
          <el-button type="primary" :loading="dialogParams.loading" @click="submitDialogForm(dialogFormRef)">
            确认
          </el-button>
          <el-button @click="resetDialogForm(dialogFormRef)">重置</el-button>
        </div>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script setup>
import {
  Plus
} from "@element-plus/icons-vue"
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch, computed
} from "vue"

const {
  proxy
} = getCurrentInstance()
const emits = defineEmits(["close"])


const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data:{
    type: Object,
    default: {},
  },
});
const dialogForm = reactive({
  content:'',
  courierCompany:'',
  courierNumber:'',
  dictCancelSid:'',
  // sid:'',
  // status:''
})

dialogForm.sid = computed(()=>{
  return props.data.row.sid
})
dialogForm.status = computed(()=>{
  return props.data.status
})

const dialogTitle = computed(()=>{
  // 1=确认发货，2=确认收货，3=取消订单 4=支付订单
  if(props.data.status === 1){
    return '将订单状态更改为：【已发货】'
  }
  if(props.data.status === 2){
    return '将订单状态更改为：【已收货】'
  }
  if(props.data.status === 3){
    return '取消订单'
  }
  if(props.data.status === 4){
    return '将订单状态更改为：【已支付】'
  }
  return props.data.status
})


const dialogFormRef = ref(null)
const dialogParams = reactive({
  loading: false,
})
const dialogFormRules = reactive({

})
const dialogShow = ref(false);
watch(()=>props.show,(nVal)=>{
  dialogShow.value = nVal
  if(nVal){
    getDictMembers()
  }
})
const closeDialog = () =>{
  resetDialogForm(dialogFormRef.value)
  emits("close")
}
const submitDialog = () =>{
  resetDialogForm(dialogFormRef.value)
  emits("close",true)
}
const resetDialogForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
const submitDialogForm = (formEl,params) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      let data = {...dialogForm}
      proxy.$util.filterObj(data);
      dialogParams.loading = true
      let url = 'order/update-status';
      proxy.$axios.put(url, data)
          .then((res) => {
            dialogParams.loading = false
            if (res.data.code == 200) {
              proxy.$message({
                message: `成功!`,
                type: "success"
              })
              submitDialog();
            } else {
              proxy.$message({
                message: res.data.msg,
                type: "error"
              })
            }
          })
          .catch((err) => {
            dialogParams.loading = false
          })
    }
  })
}
const loading = ref(false)
const list = ref([])
const getDictMembers = async () =>{
  loading.value = true
  await proxy.$axios
      .get(`/dict-members`,{
        dictKey:'cancel',
        current: 1,
        size: 99,
        ascended:false,
        sortFieldName:'created',
      })
      .then((res) => {
        if (res.data.code == 200) {
          let resData = res.data.data
          list.value = resData.records
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      }).catch((err) => {

      }).finally(()=>{
        loading.value = false
      })
}


onMounted(() => {


})
</script>

<style lang="less">



</style>